<template>
<div class="search-page header-page">
  <o-header v-show="thisShowOHeader"
            :showbar="showobar"
            :num="num">
  </o-header>
  <x-header :left-options="{ backText: '' }"
            ref="header">
    <x-input v-model="value"
             placeholder="搜索网盘文件"></x-input>
    <img slot="right"
         :src="searchImg"
         width="46"
         height="46"
         @touchstart="clickSearchImg = true"
         @touchend="clickSearchImg = false">
  </x-header>
  <div class="search-status">搜索结果（5）</div>
  <scroll wrapperStyle="height: calc(100% - 70px);"
          :scrollbar="true">
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
    <folder :checkbox="checkbox"
            :folderImg="folderImg"></folder>
  </scroll>
</div>

</template>

<script>
import { XHeader, Group, XInput } from 'vux';
import { mapState, mapActions } from 'vuex';
import folder from '../components/folder';
import oHeader from '../components/oHeader';
import Scroll from '../components/scroll';

import searchNormal from '../assets/titlebar_search_normal.png';
import searchPressed from '../assets/titlebar_search_pressed.png';
import folderImg from '../assets/icon_list_txtfile.png';

export default {
  components: {
    XHeader,
    Group,
    folder,
    oHeader,
    XInput,
    Scroll
  },
  data() {
    return {
      checkbox: {
        check: false
      },
      thisShowOHeader: false,
      showobar: [
        'download',
        'share',
        'delete',
        'rename',
        'more'
      ],
      num: 0,
      value: '',
      clickSearchImg: false,
      folderImg
    }
  },
  computed: {
    searchImg() {
      return !this.clickSearchImg ? searchNormal : searchPressed
    }
  },
  methods: {
    ...mapActions([
          'updateHeaderHeight',
          'showOHeader'
    ]),
    setStyle() {
      const top = this.$refs.header.$el.offsetHeight
      document.getElementById('oheader').style.height = top + 'px'
      this.updateHeaderHeight(top)
      this.thisShowOHeader = true
    }
  },
  created() {
    setTimeout(() => {
      this.$root.$on('click-cell', () => {
        alert('hhhh')
      })
      this.$root.$on('longtouch-cell', () => {
        this.checkbox.check = true
      })
      this.$root.$on('hide-oheader', () => {
        this.checkbox.check = false
      })
    })
  },
  mounted() {
    setTimeout(() => {
      this.setStyle()
    }, 300)
  },
  watch: {
    'checkbox.check': function(val) {
      if (val) {
        this.showOHeader(true)
      } else {
        this.showOHeader(false)
      }
    }
  },
  destroyed() {
    this.$root.$off('click-cell')
    this.$root.$off('longtouch-cell')
    this.$root.$off('hide-oheader')
  }
}

</script>

<style>
.search-page .weui-cell {
  padding: 0;
}

.search-page .vux-x-input {
  background-color: white!important;
}

.search-page .vux-x-input input {
  color: #607D8B;
  height: 40px;
  line-height: 40px;
  padding: 0 5px;
  font-size: 20px;
}

.search-page .vux-header-right {
  top: 0!important;
  right: 0!important;
}

.search-status {
  padding: 2px 10px;
  font-size: 13px;
  background-color: #eaeaea;
}
</style>
